import React from 'react';
import { Form, InputNumber } from 'antd';
import { toNumber } from 'lodash';
import styles from './index.less';

const Evaluation = ({ form, data, refInstance, ...rest }) => {
    const { getFieldDecorator } = form;
    const [error, setError] = React.useState('');

    const handlePercentChange = (type, val) => {
        if (type === 2) {
            form.setFieldsValue({
                teacherRate: val < 100 ? 100 - val : 0
            });
            if (!val) {
                setTimeout(() => {
                    form.setFieldsValue({
                        leaderRate: 0
                    });
                });
            }
        } else {
            form.setFieldsValue({
                leaderRate: val < 100 ? 100 - val : 0
            });
            if (!val) {
                setTimeout(() => {
                    form.setFieldsValue({
                        teacherRate: 0
                    });
                });
            }
        }
    };

    return (
        <>
            <Form {...rest}>
                <Form.Item label="综合能力规则" required help={error || ''} validateStatus={error ? 'error' : ''}>
                    <div style={{ display: 'flex', flexWrap: 'wrap' }}>
                        能力综合分 = 带教人分数 ×
                        <Form.Item label="" className={styles.noExplain} style={{ margin: '0 8px 0' }}>
                            {getFieldDecorator('teacherRate', {
                                initialValue: typeof data?.teacherRate !== 'undefined' ? data?.teacherRate : 60,
                                rules: [
                                    {
                                        validator(rule, value, callback) {
                                            const leaderRate = form.getFieldValue('leaderRate');
                                            if (toNumber(value) + toNumber(leaderRate) === 100) {
                                                setError('');
                                                callback();
                                                return;
                                            }
                                            callback(' ');
                                            setError('总比例需等于100');
                                        }
                                    }
                                ]
                            })(
                                <InputNumber
                                    placeholder="请输入"
                                    allowClear
                                    min={0}
                                    max={100}
                                    precision={0}
                                    style={{ width: 80 }}
                                    onChange={v => handlePercentChange(1, v)}
                                />
                            )}
                        </Form.Item>
                        % + 部门主管评分 ×
                        <Form.Item label="" className={styles.noExplain} style={{ margin: '0 8px 0' }}>
                            {getFieldDecorator('leaderRate', {
                                initialValue: typeof data?.leaderRate !== 'undefined' ? data?.leaderRate : 40
                            })(
                                <InputNumber
                                    placeholder="请输入"
                                    allowClear
                                    min={0}
                                    max={100}
                                    precision={0}
                                    style={{ width: 80 }}
                                    onChange={v => handlePercentChange(2, v)}
                                />
                            )}
                        </Form.Item>
                        %
                    </div>
                </Form.Item>
            </Form>
        </>
    );
};

export default React.forwardRef((props, ref) => <Evaluation {...props} refInstance={ref} />);
